import React from 'react';
import { withRouter } from 'react-router-dom';
import routes from '../../router/router.config';
import './index.css';
import { CaretRightOutlined, CaretDownOutlined } from '@ant-design/icons';
function leftNav(props) {
  console.log(window.location.href.slice(23));
  let [path, changePath] = React.useState(window.location.href.slice(23));
  let list = React.useMemo(() => {
    return routes.filter((item) => item.isNav);
  }, [routes]);
  const dian = (item) => {
    return () => {
      item.open = !item.open;
      if (item.children) {
        changePath(item.children[0].path);
        props.history.push(item.children[0].path);
      }
    };
  };
  const routeOnclick = (item) => {
    return () => {
      console.log(item);
      item.open = !item.open;
      changePath(item.path);
      props.history.push(item.path);
    };
  };
  const routeOnclick1 = (item) => {
    return () => {
      console.log(path, item.path, 29);
      item.open = !item.open;
      changePath(item.path);
      props.history.push(item.path);
    };
  };
  return (
    <div className="leftNav">
      {list.map((item, index) => {
        return (
          <div key={item.id}>
            <p key={item.id} onClick={dian(item)}>
              {item.isOpen ? <CaretDownOutlined /> : <CaretRightOutlined />}
              {item.title}
            </p>
            {item.open && item.open === true ? (
              <ul className="open">
                {item.children &&
                  item.children.map((items, index) => {
                    return (
                      <li key={index}>
                        <p
                          onClick={routeOnclick(items)}
                          className={path === items.path ? 'active' : ''}
                        >
                          {items.children && items.isOpen ? (
                            <CaretDownOutlined />
                          ) : (
                            <CaretRightOutlined />
                          )}
                          {items.title}
                        </p>
                        <div className="open1">
                          {items.children && items.open === true
                            ? items.children.map((item, index) => {
                                return (
                                  <p
                                    key={index}
                                    onClick={routeOnclick1(item)}
                                    className={path === item.path ? 'active' : ''}
                                  >
                                    {item.title}
                                  </p>
                                );
                              })
                            : ''}
                        </div>
                      </li>
                    );
                  })}
              </ul>
            ) : (
              ''
            )}
          </div>
        );
      })}
    </div>
  );
}
export default withRouter(leftNav);

// import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons';
// import { Menu } from 'antd';
// let list = routes.filter((item) => item.isNav);
// console.log(list);
// // const items = [
// //   list.map((item, index) => {
// //     return { label: item.title, key: JSON.stringify(index), icon: <MailOutlined />, children: [] };
// //   }),
// // ];

// const items = [
//   {
//     label: list[0].title,
//     key: JSON.stringify(list[0]),
//     icon: <MailOutlined />,
//     children: [
//       list[0].children.map((item, index) => {
//         return { label: item.title, key: JSON.stringify(index), children: [] };
//       }),
//     ],
//   },
//   {
//     label: list[1].title,
//     key: JSON.stringify(list[1]),
//     icon: <AppstoreOutlined />,
//     children: [],
//   },
//   { label: list[2].title, key: JSON.stringify(list[2]), icon: <SettingOutlined />, children: [] },
//   { label: list[3].title, key: JSON.stringify(list[3]), icon: <MailOutlined />, children: [] },
//   { label: list[4].title, key: JSON.stringify(list[4]), icon: <MailOutlined />, children: [] },
//   { label: list[5].title, key: JSON.stringify(list[5]), icon: <MailOutlined />, children: [] },
//   { label: list[6].title, key: JSON.stringify(list[6]), icon: <MailOutlined />, children: [] },
//   { label: list[7].title, key: JSON.stringify(list[7]), icon: <MailOutlined />, children: [] },
// ];

// const leftNav = () => {
//   // const items = [
//   //   list.map((item) => {
//   //     console.log(item.title);
//   //     return {
//   //       label: item.title,
//   //       key: JSON.stringify(item.title),
//   //       icon: <MailOutlined />,
//   //       children: [],
//   //     };
//   //   }),
//   // ];
//   return (
//     <Menu
//       onClick={() => {
//         console.log(13);
//       }}
//       mode="inline"
//       style={{
//         width: 206,
//       }}
//       items={items}
//     />
//   );
// };
// export default leftNav;
